<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="月份：" prop="month">
        <DatePicker
          v-model="searchForm.month"
          placeholder="请选择月份"
          placement="bottom-end"
          style="width: 200px"
          type="month"
        ></DatePicker>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="getAttendancePersonnelList()">搜索</Button>
        <Button @click="handleReset()">重置</Button>
      </Form-item>
    </Form>
    <div class="btns" style="margin-bottom:10px;">
      <upload-file ref="uploadCardFile" button-name="导入" @on-change="uploadData($event, 'card')"></upload-file>
    </div>
    <div class="demo-spin-container">
      <Spin v-if="spinShow" fix>
        <Icon class="demo-spin-icon-load" size="18" type="ios-loading"></Icon>
        <div>加载中</div>
      </Spin>
      <Tabs>
        <TabPane
          v-for="item in attendancePersonnel"
          :key="item.value"
          :label="item.label"
          :name="item.label"
        >
          <Table :columns="item.columns" :data="item.data" border height="600" size="small"></Table>
        </TabPane>
      </Tabs>
    </div>
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="360">
      <p slot="header" style="color:#2d8cf0;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>文件上传成功，正在导入数据</span>
      </p>
      <div style="text-align:center">
        <Button :loading="importLoading" long size="large" type="error">导入中...</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
  </Card>
</template>
<script>
import {getAttendancePersonnelData, importPersonnelAttendance} from '../../api/attendance'
import UploadFile from '../my-components/upload-file'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      modal: false,
      spinShow: false,
      importLoading: false,
      attendancePersonnel: [],
      searchForm: {
        month: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getAttendancePersonnelList()
    },
    uploadData(event) {
      this.modal = true
      this.importLoading = true
      importPersonnelAttendance({url: event.url})
        .then(res => {
          if (res.data) {
            this.$Message.success(res.message)
            this.getAttendancePersonnelList()
          } else {
            this.$Message.error(res.message)
          }
          this.modal = false
          this.importLoading = false
        })
        .catch(error => {
          this.$Message.error('导入失败')
          this.modal = false
          this.importLoading = false
        })
    },
    getAttendancePersonnelList() {
      this.spinShow = true
      getAttendancePersonnelData(this.searchForm).then(res => {
        this.attendancePersonnel = res.data.data
        this.searchForm.month = res.data.month
        this.spinShow = false
      })
    },
    handleReset() {
      this.searchForm = {
        month: ''
      }
      this.attendancePersonnel = []
      this.getAttendancePersonnelList()
    }
  }
}
</script>
<style>
.ivu-table .cell-green {
  background-color: #6ab88b;
  color: #fff;
}

.ivu-table .cell-error {
  background-color: #f5b977;
  color: #fff;
}

.ivu-table .cell-danger {
  background-color: #ff7073;
  color: #fff;
}

.ivu-table .cell-info {
  background-color: #7c8489;
  color: #fff;
}

.ivu-table .cell-other {
  background-color: #515a6e;
  color: #fff;
}

.demo-spin-container {
  display: inline-block;
  width: 100%;
  min-height: 300px;
  position: relative;
  border: 1px solid #eee;
}

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
</style>
